<template>
  <a-steps class="step" direction="vertical" :current="level">
    <a-step title="任务一迷宫" />
    <!-- test3 -->
    <a-step title="状态焦虑问卷" />
    <!-- R -->
    <a-step title="任务二" />
    <!-- 判断图片是否一致的按键任务 -->
    <a-step title="调查问卷" />
  </a-steps>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  name: "step",
  data() {
    return {
      router: useRouter(),
    };
  },
  computed: {
    level: function () {
      const test = this.router.currentRoute.path.split("/", 2);
      const tt = test[1];
      switch (tt) {
        case "test3":
          return 0;
        case "R":
          return 1;
        case "test2":
          return 2;
        case "test":
          return 3;
        default:
          return null;
      }
    },
  },
};
</script>

<style scoped>
.step {
  height: 300px;
  align-items: center;
  align-self: center;
  margin-top: 100px;
}
</style>
